@import '../../css/_config/theme/default'        //主题配置
@import '../../css/_config/routerStyle'          //路由配置
@import '../../css/_config/iconfont'             //icon配置    
@import '../../css/_commondoc'                  //各系统公用部分

@import '../../css/_common/css/steps'             //steps
@import '../../css/_common/modules/table'         //table
@import '../../css/_common/modules/swiper'        //swiper
@import '../../css/_common/modules/bt_table'      //boostrap table
@import '../../css/_common/modules/alert'         //alert
@import '../../css/_common/modules/tooltip'       //tooltip
@import '../../css/_common/modules/droppop'       //droppop
@import '../../css/_common/modules/tree'         //tree
@import '../../css/_common/modules/tabs'         //tabs
@import '../../css/_common/modules/form'         //form

@import '../../css/_pages/*'        //业务


ss-func-grid-x()      //栅格
ss-func-steps('.ss-steps-num',{$hasColumn: true},  $type: 'num')
ss-func-steps('.ss-steps-icon',  $type: 'icon', $dist: 'center')

.pages-tag-view
  padding: 4px $space-minor
  >.item
    &:not(:first-child)
      margin-left: $space-small

.router-page
  .page
    padding: $space-minor
    max-width: 75%;
    margin: 0 auto;
    min-width: 700px;
    box-sizing: border-box

.icon-saui
  &:before
    content: '\e605'
  &.logo
    font-size: 40px

.m-auto-lr-10
  margin: auto 10px

.tabsBoxes
  >.item
    max-width: 980px
    margin: 20px auto
.router-item, .page
  min-height: 100%

.page-footer
  margin-top: auto
  height: 100px
  ss-display-flex(column, center, center)

@keyframes slideInLeft
  0%
    -webkit-transform: translate3d(-30px,0,0)
    transform: translate3d(-30px,0,0)
    visibility: visible
    opacity 0
  to
    -webkit-transform: translateZ(0)
    transform: translateZ(0)

.page
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft


.upload-img-with-desc
  width 160px
  input[type='textarea']
    width 160px
    height 60px
.uploader-block-previews
  ss-display-flex(row wrap)
  margin 10px 0
  >.upload-img-with-desc
    margin-right 10px
    margin-bottom 10px
  .uploader-cell 
    margin-bottom 10px
  .input[type='textarea']
    width 160px
    height 60px
.uploader-cell
  position: relative
  cursor: pointer
  border 1px solid #cfcfcf
  border-radius 5px
  .delete-preview-img
    top: -10px;
    right: -10px;
    position: absolute;
    /* still bad on picking color */
    background-color #000
    color #fff
    /* make a round button */
    border-radius: 12px;
    /* center text */
    line-height: 20px;
    text-align: center;
    height: 20px;
    width: 20px;
    font-size: 18px;
    padding: 1px;
    &:before, &:after

      box-sizing border-box
      border-radius: 5px;
      content: '';
      position: absolute;
      height: 2px;
      width: 80%;
      top: 50%;
      left: 11%;
      margin-top: -1px;
      background: #fff;
    &:before
      transform: rotate( 45deg );
    &:after
      transform: rotate( -45deg );
  .button-normal 
    width 100px
    height 30px
    display flex
    justify-content center
    align-items: center
  input[type='file']
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: 0
  img
    width 158px
    height 118px
    object-fit: contain;

.uploader-block
  >.uploader-cell
    width 100px



.size40
  font-size: 40px
//
.icon-xx
  font-size: 12px
  ss-display-flex(column, center, center)


  margin-bottom: 20px
  margin-right: 0
  width: 20%
  &:before
    font-size: 36px
    color: $color-primary
    margin-bottom: 6px
    
.demo-rounad-ui
  .item-li
    ss-display-flex(row, space-between)

    &:first-child, &:last-child

      justify-content: center

.item_tooltip 
  white-space: nowrap

.demo-item-content
  border-radius: $br
  border: 1px solid $color-line-secondary
  min-height: 160px
  .item-head
    padding: var(--space, $space)

  .item-hr
    position: relative
    &:before
      content: ''
      height: 1px
      width: 100%
      background: $color-line-secondary
      display: block
    &:after
      content: attr(data-content)
      position: relative;
      top: -9px;
      background: #fff;
      padding: 0 6px;
      left: var(--space, $space)

  .pages-title
    padding: 0 var(--space, $space) var(--space, $space)

.pages-title-sm
  margin-top: $space

//色块
.demo-bg-primary .item-box
  background: $color-primary

.demo-bg-aux-primary .item-box
  background: $color-aux-primary
.demo-bg-aux-success .item-box
  background: $color-aux-success
.demo-bg-aux-warning .item-box
  background: $color-aux-warning
.demo-bg-aux-fail .item-box
  background: $color-aux-fail
.demo-bg-aux-info .item-box
  background: $color-aux-info


.demo-bg-text .item-box
  background: $color-text
.demo-bg-text-title .item-box
  background: $color-text-title


.demo-bg-color .item-box
  background: $color-bg
.demo-bg-color-special .item-box
  background: $color-bg-special
  
.demo-bg-border .item-box
  background: $color-line
.demo-bg-border-secondary .item-box
  background:$color-line-secondary
.demo-bg-border-input .item-box
  background:$color-line-input


.item-theme
  ss-display-flex()
  >.item
    margin-left: 10px

.demo-grid
  ss-func-grid('&', {$num: 5, $spacing: 10px})    //栅格
  &.num2
    .ss-col
      width: calc(100% / 2.2)
      flex: inherit
  .caption
    font-size: $size-title-sm
    color: $color-text-title
    margin-top: 20px
  .item-box
    box-sizing: border-box
    height: 100px
    padding: 30px 15px
    border-radius: $br-lg
    color: #fff
    ss-display-flex(column, center, center)


  .item-dot-i
    font-style: normal
    display: block
    font-size: 12px
//swiper
.demo-swiper
  height: 300px
  width: 100%
  img
    width: 100%
    display: block
    height: 100%;
    object-fit: cover;
  &.item-swiper-2
    height: 500px

.demo-swiper-bg
  background: url('https://www.weaver.com.cn/em/hwcloud/img/index/s_bg.jpg')
  background-size: cover
  width: 100%
  height: 100%
  &.full-center
    ss-display-flex(column, center, center)


  &.dsb-2
    ss-display-flex(row nowrap, space-around, center)


    .item-right
      width: 40%
  .btn-default
    display: inline-flex
    margin-top: 20px

.swiper-slide-active
  .bounceIn
    animation-name: bounceIn
  .bounceInUp
    animation-name: bounceInUp
  .fadeInUp
    animation-name: fadeInUp
  .fadeInRight
    animation-name: fadeInRight
  .fadeInUpBig
    animation-name: fadeInUpBig
  .fadeInRightBig
    animation-name: fadeInRightBig
//动画
.ss-animate
  animation-duration: 1s;
  animation-fill-mode: forwards
// .bounceIn
//   animation-name: bounceIn
// .bounceInUp
//   animation-name: bounceInUp
// .fadeInUp
//   animation-name: fadeInUp
// .fadeInRight
//   animation-name: fadeInRight
// .fadeInUpBig
//   animation-name: fadeInUpBig

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        transform: translateX(100px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    80% {
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3)
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }

    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.pages-title-lg
  height: 50px
  line-height: @height 
  &:before
    content: ''
    width: 2px 
    height: 16px
    background: #000


//登录
.pages-login
  width: 500px
  margin: auto
  input:not([type='textarea'])
    flex: 1
    width: auto
    border: none
  .item-group
    border: 1px solid $borderColor
    border-radius: $inputBr
    padding: $inputPadding
    margin-bottom: $inputMb
  .item-flex-no
    flex: initial
  .item-header
    font-size: $size-title-lg
    text-align: center
    margin-bottom: $space

